import './index.css'
import React, { useState, useEffect } from 'react';
import { Input, Button, DatePicker, Select, Table, Tag, Space, Pagination, Breadcrumb, Modal } from 'antd';
import ModalseeS from './components/ModalseeS/ModalseeS'
import ModalseeS2 from './components/ModalseeS2/ModalseeS2'
import ModalseeS3 from './components/ModalseeS3/ModalseeS3'
import ModaladdS from './components/ModaladdS/ModaladdS'
import http from '../../../utils/http';
import Search from 'antd/lib/transfer/search';

function ScoreManagement() {

    //时间
    // const { RangePicker } = DatePicker;
    function onChange(value, dateString) {
        // console.log('Selected Time: ', value);
        // console.log('Formatted Selected Time: ', dateString);
    }
    function onOk(value) {
        // console.log('onOk: ', value);
    }

    // 下拉框
    const { Option } = Select;
    function handleChange(value) {
        // console.log(`selected ${value}`);
    }

    let [page, setpage] = useState(1)
    let [pageSize, setpageSize] = useState(10)
    let [total, stetotal] = useState('')

    // 条数
    const pagingtotal = () => {
        http({
            url: '/score/count',
            method: 'get',
        }).then((res) => {
            stetotal(res.data[0].count)
            // if(res.data[0].count%10==0){
            //     if((res.data[0].count/10)==1){
            //         setpage(res.data[0].count/10)
            //         console.log(res.data[0].count/10);
            //         setpage(1)
            //     }else{
            //         setpage(page-1) 
            //         console.log(page);
            //     }
            // }
        })
    }

    

     const fn = () => {
         console.log(page);
         http({
            url: '/score/management',
            method: 'get',
            data: {
                page: page,
                pageSize: pageSize
            }
        }).then((res) => {
            res.data && res.data.forEach((v, i) => {
                v.state == 1 ? v.state = "启用" : v.state = "禁用"
                v.Numerical_range = `${res.data[i].Lower_limit_of_value}-${res.data[i].Upper_limit_of_value}`
            });
            stecolumns(res.data)
        })
    }

    // 挂载
    const [columnsdata, stecolumns] = useState('')
    useEffect(() => {
        fn()
        pagingtotal()
    }, [page])

    const paging=(page, pageSize)=> {
            setpage(page)
            fn()
    }
    
    let [entry_name,setentry_name]=useState('')
    const S_entryName=(v)=>{
    // console.log(v.target.value);
    setentry_name(v.target.value)
    }

    let [state,setstate]=useState()
    const S_state=(v)=>{
        // console.log(v);
        setstate(v)
    }

    const search=()=>{
        http({
            url:'/score/search',
            method:"get",
            data:{
                entry_name:entry_name,
                state:state,
                page: page,
                pageSize: pageSize
            }
        }).then((res)=>{
            console.log(res);
            res.data && res.data.forEach((v, i) => {
                v.state == 1 ? v.state = "启用" : v.state = "禁用"
                v.Numerical_range = `${res.data[i].Lower_limit_of_value}-${res.data[i].Upper_limit_of_value}`
            });
            stecolumns(res.data)
        })
    }


    //表格
    const columns = [
        {
            title: '数据名称',
            dataIndex: "entry_name",
            key: "entry_name",
            // render: text => <a>{text}</a>,
        },
        {
            title: '数值范围',
            dataIndex: "Numerical_range",
            key: "Numerical_range",
        },
        {
            title: '单位',
            dataIndex: 'Company',
            key: 'Company',
        },
        {
            title: '分值',
            dataIndex: 'Score',
            key: 'Score',
        },
        {
            title: '表现',
            dataIndex: 'performance',
            key: 'performance',
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <ModalseeS content={record} />
                    <ModalseeS2 content={record} fn={fn} />
                    <ModalseeS3 content={record} fn={fn} pagingtotal={pagingtotal} />
                </Space>
            ),
        },
    ];

    const data = [
        {
            dataName: '心率',
            numericalValue: '1-20',
            Company: '次',
            Score: 0,
            performance: '严重',
            status: '启用'
        },
    ];

    return (
        <div id="ScoreManagementbox">
            {/* <div>健康数据</div> */}
            <p>健康数据</p>
            <div className="Breadcrumb">
                <Breadcrumb>
                    {/* <Breadcrumb.Item>健康管理</Breadcrumb.Item> */}
                    <Breadcrumb.Item>
                        <a href="">健康管理</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">分值管理</a>
                    </Breadcrumb.Item>
                    {/* <Breadcrumb.Item>An Application</Breadcrumb.Item> */}
                </Breadcrumb>
            </div>
            <div className="h1_shuruT">
                <div className="h1_shurusss">
                    <div><span className="h1_shuru_ss">名称</span> <Input className="h1_shuru_c1" onChange={S_entryName} placeholder="请输入名称" /></div>
                    <div>
                        <span className="h1_shuru_s">状态</span>
                        <Select className="h1_shuru_c3" onChange={S_state} placeholder="请选择" allowClear>
                            <Option className="h1_shuru_c3" value="1">启用</Option>
                            <Option className="h1_shuru_c3" value="0">禁用</Option>
                        </Select>
                    </div>
                    <div>
                        <Button size="small" className="h1_shuru_c4" onClick={search} type="primary">筛选</Button>
                    </div>
                </div>
                <div>
                    <ModaladdS fn={fn} pagingtotal={pagingtotal} />
                </div>
            </div>
            <Table
                rowKey="Check_item_score_id"
                columns={columns}
                dataSource={columnsdata}
                pagination={false} />
            <div className="Pagination">
                <Pagination
                    onChange={paging}
                    total={total}
                    showSizeChanger
                    showQuickJumper
                    showTotal={total => `共${total}`}
                />
            </div>
        </div>
    )
}
export default ScoreManagement